import React,{PropTypes} from 'react';
import {reduxForm} from 'redux-form';
import {Input} from 'react-bootstrap';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import CircularProgress from 'material-ui/CircularProgress';
import Icon from '../shared/Icon';
import {connect} from 'react-redux';
import {login, logout, loginPrompt, loginCancel,register,switchRegister,switchLogin} from '../.././actions/authentication';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

const style = {
    btnStyle: {
        marginTop: 40,
        width: "20%"
    },
    inputStyle: {
      width: "50%"
    },
    circleStyle: {
      position: 'absolute',
      left: '13%',
      top: '13%'
    }
}

class LoginForm extends React.Component {

    constructor(props) {
      super(props);
    }

    onSubmit(e) {
      e.preventDefault();
      const { email, password } = this.refs;
      const data = {
        email: email.input.value,
        password: password.input.value
      };
      this.props.login(data);
    }

    render() {
      const {fields: {email, password}, login, isLoggingIn, applicationName, loginError} = this.props;

      return (
        <MuiThemeProvider>
        <div>
          {isLoggingIn ?
            <div className = {'circle-content'}>
              <CircularProgress size={1.5} style={style.circleStyle}/>
            </div> : null
         }
          <form onSubmit = {this.onSubmit.bind(this)}>
              <div>
                  <h2 className={'title-content'}>登陆{applicationName}系统</h2>
                  <TextField
                    defaultValue="Username Value"
                    type="text" {...email} placeholder="Email" style={style.inputStyle}
                    errorText= { email.touched && email.error}
                    ref= "email"
                  /><br />
              </div>
              <TextField
                defaultValue="Password Value"
                type="password" {...password} placeholder="Password"  style={style.inputStyle}
                errorText= { password.touched && password.error}
                ref= "password"
              /><br />
              <RaisedButton label={"Submit"} type="submit" primary={true} style={style.btnStyle} disabled = {email.error || password.error || isLoggingIn ? true : false}/>
          </form>
          <div className={'error-content'}>
          {loginError ? 
            <Icon icon={'exclamation-triangle'} /> : null
          }
          {loginError}
          </div>
        </div>
        </MuiThemeProvider>
      );
    }
};


const validate = (values) => {
    const errors = {};
    if (!values.email) {
      errors.email = 'Required'
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
      errors.email = 'Invalid email address'
    }
    if (!values.password) {
      errors.password = 'Required'
    } 
    return errors;
};

const mapStateToProps = (state) => {
    return {
        applicationName: state.global.applicationName,
        environmentName: state.global.environmentName,
        ...state.authentication
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        login: (data) => {
            dispatch(login(data));
        },
    };
};

LoginForm.propTypes = {
  fields: PropTypes.object.isRequired
}

export default connect(mapStateToProps,mapDispatchToProps)(reduxForm({
        form: 'login',
        fields: ['email', 'password'],
        validate
    },
    state => ({
        initialValues: {
            email: state.global.storedUserName,
            password: state.global.storedPassword
        }
    })
)(LoginForm));
